import Vue from 'vue'
export const numberOnly = Vue.directive('numberOnly', {
    bind: function(el) {
        el.addEventListener('keyup', () => {
            let input = el.querySelector('.el-input__inner')
            let value = input.value
                // debugger
            const newVal = value === '' ? undefined : Number(value)
            if (isNaN(newVal)) {
                value.replace(/([^.\d+])|(\d*\.?\d*)/, (match, p1, p2, p3) => {
                    if (p2 != undefined) {
                        input.value = p2
                    } else {
                        input.value = ''
                    }
                })
            }
            // input.value = newVal.replace(/[^.\d+]|(\d+\.)\.?$/, '$1')
        })
    },
    unbind: function(el) {
        el.removeEventListener('keyup', () => {
            let input = el.querySelector('.el-input__inner')
            let value = input.value
                // debugger
            const newVal = value === '' ? undefined : Number(value)
            if (isNaN(newVal)) {
                value.replace(/([^.\d+])|(\d*\.?\d*)/, (match, p1, p2, p3) => {
                    if (p2 != undefined) {
                        input.value = p2
                    } else {
                        input.value = ''
                    }
                })
            }
        })
    }
})

export const pnumberOnly = Vue.directive('pnumberOnly', {
    bind: function(el) {
        el.addEventListener('keyup', () => {
            let input = el.querySelector('.el-input__inner')
            let value = input.value
                // debugger
            input.value = isNaN(parseInt(value)) ? '' : parseInt(value)
                // input.value = newVal.replace(/[^.\d+]|(\d+\.)\.?$/, '$1')
        })
    },
    unbind: function(el) {
        el.removeEventListener('keyup', () => {
            let input = el.querySelector('.el-input__inner')
            let value = input.value
            input.value = isNaN(parseInt(value)) ? '' : parseInt(value)
        })
    }
})

export const focus = Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。

    inserted: function(el) {
        // 聚焦元素
        el.focus()
    },
    //也可以用update,update就是当页面有操作的时候就触发，比如点击按钮，输入框输入都算。
    //有一个要注意的就是，就是你页面有几个input,比如一个input绑定了v-focus,一个没有绑定。你在没绑定v-focus的input输入时，绑定了v-focus的input就是自动获取焦点，这是个bug.
    update: function(el) {
        el.focus()
    }
})